<template>
    <div class="views-zhuye">
        <div>
            <el-carousel indicator-position="outside" height="480px">
                <el-carousel-item v-for="item in bhtList" :key="item.id">
                    <router-link :to="item.url">
                        <div
                            style="background-size: cover"
                            @click="$goto(item.url)"
                            :style="{'background-image': 'url('+$formatImageSrc(item.image)+')',width:'100%', height: '480px'}"
                        ></div>
                    </router-link>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div>
            <e-container>
                <div class="title-modelbox-widget">
                    <h3 class="section-title">
                        <div class="more">
                            <router-link to="/shangpinxinxi">更多>></router-link>
                        </div>
                        商品信息
                    </h3>
                    <div class="sidebar-widget-body">
                        <div class="floor_goods_wrap clearfix">
                            <el-row :gutter="20">
                                <el-col :md="6" v-for="r in shangpinxinxilist">
                                    <div class="floor_goods_wrap_li">
                                        <div class="floor_goods_wrap_b">
                                            <router-link :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}" class="floor_goods_img">
                                                <e-img :src="r.shangpintupian" pb="100"></e-img>
                                            </router-link>
                                            <router-link
                                                :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}"
                                                class="floor_goods_tit"
                                                v-html="$substr(r.shangpinmingcheng,20)"
                                            ></router-link>
                                            <router-link
                                                :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}"
                                                class="floor_goods_txt"
                                                v-html="$substr(r.shangpinmiaoshu,20)"
                                            ></router-link>
                                            <router-link :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}" class="floor_goods_price"> ￥{{ r.jiage }}元 </router-link>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- /.sidebar-widget-body -->
                </div>
            </e-container>
        </div>
        <div>
            <e-container>
                <div class="title-dianzishangwu">
                    <div class="section_title">
                        <h2>
                            <span>热门商品</span>
                        </h2>
                    </div>
                    <div class="section_content">
                        <div class="floor_goods_wrap clearfix">
                            <el-row :gutter="20">
                                <el-col :md="6" v-for="r in shangpinxinxilist1">
                                    <div class="floor_goods_wrap_li">
                                        <div class="floor_goods_wrap_b">
                                            <router-link :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}" class="floor_goods_img">
                                                <e-img :src="r.shangpintupian" pb="100"></e-img>
                                            </router-link>
                                            <router-link
                                                :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}"
                                                class="floor_goods_tit"
                                                v-html="$substr(r.shangpinmingcheng,20)"
                                            ></router-link>
                                            <router-link
                                                :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}"
                                                class="floor_goods_txt"
                                                v-html="$substr(r.shangpinmiaoshu,20)"
                                            ></router-link>
                                            <router-link :to="{path:'/shangpinxinxi/detail',query:{id:r.id}}" class="floor_goods_price"> ￥{{ r.jiage }}元 </router-link>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";

    import { ref, reactive } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";

    const route = useRoute();
    // 获取轮播图信息
    const bhtList = DB.name("lunbotu").order("id desc").limit(5).selectRef();

    // 定义响应式变量shangpinxinxilist,并获取数据商品信息模块的数据
    const shangpinxinxilist = DB.name("shangpinxinxi").where("issh", "是").limit("5").order("id desc").selectRef();

    // 定义响应式变量shangpinxinxilist1,并获取数据商品信息模块的数据
    const shangpinxinxilist1 = DB.name("shangpinxinxi").where("issh", "是").limit("4").order("xiaoliang desc").selectRef();
</script>

<style scoped lang="scss">
    .views-zhuye {
    }
</style>
